<template>
  <div class="analysis-page">
    <h1>📊 订单数据分析</h1>
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts' // 引入 ECharts
import http from "@/request/Http.js"; // 用于请求后端接口

const chartRef = ref(null) // 用于挂载 ECharts

onMounted(async () => {
  try {
    // 1. 请求后端接口，获取每日订单量数据
    const res = await http.get('/analytics/dailyOrderCount?days=30') // 你的后端接口
    const data = res.data // 假设返回格式：[{ date: '2024-06-01', count: 5 }, ...]

    const dates = data.map(item => item.date) // 日期数组，如 ['2024-06-01', '2024-06-02', ...]
    const counts = data.map(item => item.count) // 订单数数组，如 [5, 3, 7, ...]

    // 2. 初始化 ECharts 图表
    const chart = echarts.init(chartRef.value)

    // 3. 设置图表配置项并渲染
    chart.setOption({
      title: {
        text: '近30天每日订单量',
        left: 'center' // 标题居中
      },
      tooltip: {
        trigger: 'axis',
        formatter: '{b}: {c} 单' // 鼠标悬浮时显示：日期: 订单数 单
      },
      xAxis: {
        type: 'category',
        data: dates, // X轴为日期
        axisLabel: {
          rotate: 45 // 日期标签倾斜45度，避免重叠
        }
      },
      yAxis: {
        type: 'value',
        name: '订单数' // Y轴名称
      },
      series: [{
        type: 'line', // 折线图
        data: counts, // 数据为订单数
        smooth: true, // 平滑曲线
        lineStyle: {color: '#409EFF'}, // 折线颜色
        itemStyle: {color: '#409EFF'} // 数据点颜色
      }]
    })
  } catch (err) {
    console.error('获取每日订单量失败：', err)
    alert('获取每日订单量失败，请稍后再试。')
  }
})
</script>

<style scoped>
.analysis-page {
  padding: 20px;
  text-align: center;
}
</style>